<template>
  <div class="pip_box" :style="`height:${height}px;width:${width}px;`">
    <div class="pips" >
      <div class="p_box" :style="styleFn(height) + `transform: rotateX(${num * 36 + r * 360}deg);transition: all ${d}s ease-out;`">
        <div :class="`num${idx}`" v-for="(i,idx) in 10" :style="styleFn(height)" :key="i">
          {{ idx }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch,ref } from 'vue'
const props = defineProps({
  /** 宽度 */
  width:{
    type: Number,
    default: 50
  },
  /** 高度 */
  height: {
    type: Number,
    default: 80
  },
  /** 数字牌确定数 */
  num: {
    type: Number,
    default: 0
  },
  /** 动画时间 */
  duration: {
    type: Number,
    default: 1
  },
  /** 数字转牌动画期间旋转圈数，0表示不满一圈 */
  revolution: {
    type: Number,
    default: 0
  }
})
const r = ref(0)
const d = ref(0)
watch(()=> props.num, n => {
  r.value = props.revolution
  d.value =  props.duration
  setTimeout(() => {
    d.value = 0
    r.value = 0
  }, props.duration * 1001);
})
const styleFn = (h:number):string => {
  const deep = ((h -  4) * 0.5) / (Math.tan(18 * Math.PI / 180))
  return `transform-origin: 50% 50% -${deep}px;`
}
</script>
<script lang="ts">
export default{
  name: 'PNum'
}
</script>

<style lang="less" scoped>
.pip_box {
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: inset 0px -2px 4px 0px rgba(86,165,217,0.6);
}
.pips {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-image: linear-gradient(180deg, rgba(107, 172, 245,.8), rgba(0, 0, 0, 0), rgba(107, 172, 245,.2)) 2 2;
  .p_box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform: rotateX(0);
    // transition: all 1s ease-in;
    transform-style: preserve-3d;
  }
  [class^='num'] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: #65DEFF;
    background: #0b1d43;
    box-shadow: inset 0px -2px 4px 0px rgba(86,165,217,0.6);
    font-family: RanyMedium;
    font-size: 56px;
  }
  .angle(9);
}
.angle(@n) when (@n >= 0) {
  .num@{n} {
    transform: rotateX(360 - 36deg * @n);
  }
  .angle((@n - 1))
}
</style>